<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">


    <el-row :gutter="10">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" :column="3" :size="size" border>

          <el-descriptions-item label="物品名称">{{shoppingCart.name}}</el-descriptions-item>
          <el-descriptions-item label="商品类型">{{shoppingCart.shoppingCartTypeName}}</el-descriptions-item>
          <el-descriptions-item label="评分">
            <el-rate disabled v-model="shoppingCart.grade"></el-rate>
          </el-descriptions-item>
          <el-descriptions-item label="买入价格">{{shoppingCart.price}} 元</el-descriptions-item>
          <el-descriptions-item label="是否购买">
            <el-tag :size="tagSize" :type="purchaseToTag(shoppingCart.purchase)">
              {{purchaseToChinese(shoppingCart.purchase)}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="录入时间">{{getTime(shoppingCart.createTime)}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="1" :size="size" border>

          <el-descriptions-item label="商品链接地址">{{shoppingCart.path}}</el-descriptions-item>
          <el-descriptions-item label="详情">{{shoppingCart.details}}</el-descriptions-item>
          <el-descriptions-item label="推荐理由">{{shoppingCart.reason}}</el-descriptions-item>

        </el-descriptions>

      </el-col>
    </el-row>

    <!--图片展示-->
    <el-row style="margin-top: 10px">
      <el-col :span="24">

        <el-card shadow="never">

          <!--<div class="position">提示：点击图片可以放大查看</div>-->

          <el-alert
            title="提示"
            type="success"
            :closable="false"
            description="点击图片可以放大查看">
          </el-alert>

          <div class="images">
            <div v-for="(item, index) in shoppingCart.uploadFileList" :key="index" class="image-middle">
              <el-card shadow="hover" :body-style="{ padding: '5px' }">
                <!--//添加鼠标点击或悬浮图片放大功能-->
                <el-popover>
                  <img :src="shoppingCart.uploadFileList[index].savePath" slot="reference" class="image"/>
                  <img :src="shoppingCart.uploadFileList[index].savePath" class="imagePreview"/>
                </el-popover>
                <!--<div style="text-align:center;padding-top:12px">-->
                <!--  &lt;!&ndash;图片说明文字&ndash;&gt;-->
                <!--  <span>{{shoppingCart.uploadFileList[index].fileInfo}}</span>-->
                <!--</div>-->
              </el-card>
            </div>
          </div>

        </el-card>



      </el-col>
    </el-row>


    <span slot="footer" class="dialog-footer">
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

  import {checkNull, getFullTime} from "../../utils/utils";
  import http from '@/utils/http'

  export default {
    name: "ShoppingCartDetailed",
    data(){
      return {
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '详情',
        },
        // 购物信息
        shoppingCart: {
          id: null,
          name: null,
          shoppingCartTypeName: null,
          typeId: null,
          path: null,
          details: null,
          price: null,
          purchase: null,
          reason: null,
          grade: null,
          uploadFileList: null,
        },
        // 列表的尺寸
        size: 'small',
        // tag 的大小
        tagSize: 'small',
      }
    },
    methods: {
      /**
       * 打开购物详情
       * @param obj 购物信息
       */
      openShoppingCartDetailed(obj){
        this.shoppingCart = obj
        this.tableConfig.show = true
        this.$store.commit('navigationListChange', ['我的购物', '详情'])
      },
      /**
       * 转换时间戳为时间格式
       */
      getTime(item){
        return getFullTime(item)
      },
      /**
       * 是否购买转中文
       * @param item 要转换的数据
       * @return {string} 返回的转换结果
       */
      purchaseToChinese(item) {
        if (checkNull(item)){
          return '未知'
        }
        if (item === 1){
          return "未购买"
        } else {
          return "已购买"
        }
      },
      /**
       * 是否购买转tag
       * @param item 要转换的数据
       * @return {string} 返回的转换结果
       */
      purchaseToTag(item) {
        if (checkNull(item)){
          return 'info'
        }
        if (item === 1){
          return "danger"
        } else {
          return "success"
        }
      },
    },
  }
</script>

<style scoped>

  /* “Tissue Search”字体样式 */
  .position {
    margin-left: 15px;
    font-size: 15px;
    font-weight: 500;
  }

  /* 图片总布局，样式 */
  .images{
    display: flex;
    margin-top: 20px;
    margin-left: 21px;
    margin-right: 20px;
    flex-wrap: wrap;
  }
  /* 图片之间 */
  .image-middle{
    margin-right: 15px;
    margin-bottom: 15px;
  }
  /* 单张图片样式 */
  .image{
    width:146px;
    height: 146px;
  }

</style>
